<template>
  <views class="facilitator_agent_amend">
    <div class="header">
        <div class="header_title" :class="{active: baseInfo}"  @click="changeState('baseInfo')" >基本信息</div>
        <div class="header_title" :class="{active: isRate}" @click="changeState('isRate')" >费率设置</div>
    </div>

    <div class="content">
      <!-- 基本信息 -->
      <agent-base v-show="baseInfo" type=2    ></agent-base>

      <!-- 费率设置 -->
      <agent-rate v-show="isRate" type=2  :agent_id="agent_id" ></agent-rate>

    </div>

  </views>
</template>

<script>

  import AgentBase from 'components/agentManagements/child_component/agent_base';
  import AgentRate from 'components/agentManagements/child_component/agent_rate';


export default {
  data() {
    return {
      baseInfo: true,
      isRate: false,
      agent_id: 0
    };
  },
  components:{
      AgentBase,
      AgentRate
  },
  methods: {
    changeState(select){
      switch(select){
        case 'baseInfo':
          if(!this.baseInfo){
            this.baseInfo = true;
            this.isRate = false;
          }
          break;
          
        case 'isRate':
          if(!this.isRate){
              this.isRate = true;
              this.baseInfo = false;
          }
          break;

      }
    }

  },
  mounted() {
      this.agent_id = this.$route.query.agent_id;
      this.$setRouteTitle();
  }
};
</script>

<style lang="less"   :scope="true"  >

  .facilitator_agent_amend{
        padding:0 10px;
        font-size: 14px;
        background: #fff;

        .active{
            color: #4280f2;
            border-bottom: 2px solid #4280f2
        }

        .header{
            display: inline-block;
            margin:10px auto;
            width: 100%;
            border-bottom: 1px solid #e0e0e0;

            .header_title{
                width: 70px;
                height: 50px;
                margin: 0 10px;
                line-height: 50px;
                text-align: center;
                float: left;
                
            }
        }

        .content{
            margin: 10px;
        }

    }

</style>